<!-- @tce
代码说明：监测预警的标题栏
创建时间：2024.9.25       开发者：lizhicheng
使用项目：zhongguanghe   代码版本：V1.0 -->

<template>
  <div class="status-monitor-page">
    <!-- <el-row class="monitor-navbar" type="flex" justify="space-between" align="middle">
      <el-col :span="20">
        <el-menu background-color="#000C34" text-color="#4bc3ec" :default-active="selectedTab" mode="horizontal" @select="handleSelect">
          <el-menu-item index="status-monitor">状态监测</el-menu-item>
          <el-menu-item index="alarm">预警管理</el-menu-item>
        </el-menu>
      </el-col>
    </el-row> -->
    <div class="content-wrapper">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="24">
          <div v-if="selectedTab === 'status-monitor'">
            <!-- 状态监测的内容 -->
            <StatusMonitor />
          </div>
          <div v-else-if="selectedTab === 'alarm'">
            <!-- 预警管理的内容 -->
            <Alarm />
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import StatusMonitor from '@/views/MonitoringEarlyWarning/StatusMonitorPage.vue'
import Alarm from '@/views/Alarm/alarmPage.vue'


export default {
  name: 'SystemManagementPage',
  components: {
    StatusMonitor,
    Alarm,

  },
  data() {
    return {
      breadcrumbs: ['监测预警', '状态监测'],
      selectedTab: 'status-monitor',
    };
  },
  methods: {
    handleSelect(key) {
      if (key!== null) {
        this.selectedTab = key;
        this.updateBreadcrumbs();
      }
    },
    updateBreadcrumbs() {
      if (this.selectedTab === 'status-monitor') {
        this.breadcrumbs = ['监测预警', '状态监测'];
      } else if (this.selectedTab === 'alarm') {
        this.breadcrumbs = ['检测预警', '预警管理'];
      }
    },
  },
};
</script>

<style scoped>
/* 整体页面背景颜色 */
.status-monitor-page {
  background-color: #000C34;
  min-height: 100vh;
  padding: 20px;
  color: #C0C4CC;
}

/* 导航栏样式 */
.monitor-navbar {
  /* background-color: #000C34!important;*/
  /*padding: 10px;*/
  margin-bottom: 20px;
}

.monitor-navbar.el-menu--horizontal {
  height: 30px; /* 设置你想要的高度值 */
}

/* 选中菜单项样式 */
.el-menu-item.is-active {
  color: white!important;
  border: 1px solid #0062ff;
  background-color: #0062ff!important;
  height: 30px;
}
/* 暂时不要分割线 */
.el-menu--horizontal.el-menu {
  border-bottom: 1.5px solid #053789;
  display: block;
  width: 93vw;
}


/* 内容区域样式 */
.content-wrapper {
  margin-top: 20px;
}
</style>